<template>
    <el-form ref="loginFormRef" :model="formData" :rules="rules">
        <el-form-item prop="account">
            <el-input v-model="formData.account" prefix-icon="fa fa-user"
                      placeholder="账号/手机/邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="formData.password" prefix-icon="fa fa-lock" show-password
                      placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="secCode">
            <el-input
                    v-model="formData.secCode"
                    placeholder="验证码"
                    prefix-icon="fa fa-shield"
            >
                <el-button slot="append" @click="createCode"><sb-identify :identifyCode="checkCode"></sb-identify></el-button>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-row type="flex" class="row-bg" justify="center">
                <el-button type="success" @click="login">登录</el-button>
                <el-button type="info" @click="reset">重置</el-button>
            </el-row>
        </el-form-item>
    </el-form>
</template>

<script>
    //导入绘制验证码的组件
    import sbIdentify from '@/components/login/SIdentify.vue';
    export default {
        name: "login",
        data() {
            //验证验证码
            let checkCode = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('验证码不能为空'));
                }
                setTimeout(() => {
                        if (value.toLowerCase() != this.checkCode.toLowerCase()) {
                            callback(new Error('验证码不正确'));
                        } else {
                            callback();
                        }
                }, 1000);
            };
            return {
                formData: {
                    account: '',
                    password: '',
                    secCode: '',
                },
                checkCode: 'aaaa',
                //验证规则
                rules: {
                    //详细的验证规则
                    account: [
                        //required:验证规则属性：（必填）
                        //message:错误提示信息
                        //trigger:验证时机 blur:失去焦点
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    secCode: [{trigger: "blur",validator:checkCode}]
                },
            };
        },
        methods: {
            login() {
                this.$refs.loginFormRef.validate(async (flag) => {
                    if (flag) {
                        // const {data: message} = await this.$http.get('/login.json',{params:this.formData});
                        const {data: message} = await this.$http.post('/login/account', this.formData);//后端交互
                        console.log(message.flag);
                        if (message.flag) {
                            window.sessionStorage.setItem("accountToken", message.token);
                            await this.$router.push({name:"Home"});
                        }else {
                            this.$message.error(message.message);
                        }
                    }
                })
            },
            reset() {
                this.$refs.loginFormRef.resetFields();
            },
            createCode() {
                let code = "";
                const codeLength = 4; //验证码的长度
                const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
                    'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; //随机数
                for (let i = 0; i < codeLength; i++) { //循环操作
                    let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
                    code += random[index]; //根据索引取得随机数加到code上
                }
                console.log(code);
                this.checkCode = code; //把code值赋给验证码
            },
        },
        components:{
            sbIdentify
        },
        mounted(){
            this.createCode();
        }
    }
</script>

<style lang="less" scoped>

</style>